<template>
    <NuxtLink 
      :to="`/products/${product.id}`"
      class="product-card card group overflow-hidden"
    >
      <!-- 产品图片 -->
      <div class="relative h-48 overflow-hidden">
        <NuxtImg
          :src="product.cover"
          :alt="product.title"
          class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
        />
        <!-- 难度标签 -->
        <span 
          :class="[
            'absolute top-2 left-2 px-2 py-1 rounded text-xs font-medium',
            difficultyClass
          ]"
        >
          {{ difficultyText }}
        </span>
        <!-- 收藏按钮 -->
        <button
          class="absolute top-2 right-2 w-8 h-8 bg-white/90 hover:bg-white rounded-full flex items-center justify-center transition-all"
          @click.prevent="toggleFavorite"
        >
          <div 
            :class="isFavorite ? 'i-mdi-heart text-red-500' : 'i-mdi-heart-outline text-gray-600'"
            class="text-lg"
          />
        </button>
      </div>
      
      <!-- 产品信息 -->
      <div class="p-4">
        <h3 class="text-lg font-bold mb-2 line-clamp-1 group-hover:text-primary-600 transition-colors">
          {{ product.title }}
        </h3>
        <p class="text-sm text-gray-600 mb-3 line-clamp-2">
          {{ product.description }}
        </p>
        
        <!-- 技术标签 -->
        <div class="flex flex-wrap gap-2 mb-3">
          <Tag 
            v-for="tech in product.tech.slice(0, 3)"
            :key="tech"
            size="sm"
          >
            {{ tech }}
          </Tag>
        </div>
        
        <!-- 底部信息 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-1">
            <div class="i-mdi-star text-yellow-500" />
            <span class="text-sm font-medium">{{ product.rating }}</span>
            <span class="text-sm text-gray-500">({{ product.reviews }})</span>
          </div>
          <div>
            <span v-if="product.originalPrice" class="text-sm text-gray-400 line-through mr-2">
              ¥{{ product.originalPrice }}
            </span>
            <span class="text-lg font-bold text-primary-600">
              ¥{{ product.price }}
            </span>
          </div>
        </div>
      </div>
    </NuxtLink>
  </template>
  
  <script setup lang="ts">
  import type { Product } from '~/types'
  
  interface Props {
    product: Product
  }
  
  const props = defineProps<Props>()
  
  const isFavorite = ref(false)
  
  const difficultyMap = {
    beginner: { text: '入门', class: 'bg-green-100 text-green-700' },
    intermediate: { text: '进阶', class: 'bg-blue-100 text-blue-700' },
    advanced: { text: '高级', class: 'bg-purple-100 text-purple-700' },
  }
  
  const difficultyText = computed(() => difficultyMap[props.product.difficulty].text)
  const difficultyClass = computed(() => difficultyMap[props.product.difficulty].class)
  
  function toggleFavorite() {
    isFavorite.value = !isFavorite.value
    // TODO: 调用收藏 API
  }
  </script>
  
  <style scoped>
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  </style>